<template>
  <div id="tripcancel">
    <div class="tripcancel_box">
      <div class="tripcancel_hd_box">
        <p class="tripcancel_hd">行程已取消</p>
        <p class="tripcancel_hd_text" v-show="IscancleNumber">
          <span v-show="cancelNumber == '1'"
            >您本周免责取消机会还有{{ cancleNumber }}次（共{{
              cancleNumberAlt
            }}次）</span
          >
          <span v-show="cancelNumber == '0'"
            >您本周免责取消机会已用完,下周一恢复用车服务</span
          >
        </p>
        <p class="tripcancel_hd_text">
          请告诉我们原因,我们会努力为您提供更好的服务
        </p>
      </div>
      <div class="tripcancel_list">
        <md-radio
          class="tripcancel_radio_btn"
          ref="radio"
          :options="data"
          :default-index="0"
          icon="circle-right"
          icon-inverse="circle"
          icon-position="right"
          @change="onRadioChange"
        ></md-radio>
      </div>
      <div class="complaints_input">
        <textarea
          placeholder="如果您因其它原因取消，也请告诉我们原因"
          v-model="evaluationDescribe"
          maxlength="50"
        ></textarea>
        <div class="input_calc">{{ evaluationDescribeLength }}/50</div>
      </div>
      <div class="cancelBtn">
        <h6>若有问题请联系客服010-59716713</h6>
        <p @click="tripcancelbtn">确认提交</p>
      </div>
    </div>
  </div>
</template>

<script>
import '@/assets/svgs/xc_question.svg';
import {
  Tabs,
  Icon,
  Field,
  InputItem,
  Toast,
  Radio,
  Dialog
} from 'mand-mobile';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import http from '@/common/http';
import Utils from '@/common/pakjUtils';
var CryptoJS = require('crypto-js');
// var Vconsole = require('vconsole');
// var cons = new Vconsole();
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    [Radio.name]: Radio,
    [InputItem.name]: InputItem
  },
  data() {
    return {
      title: '取消原因',
      evaluationDescribe: '',
      IsTopbar: true,
      IscancleNumber: false,
      cancleNumber: '',
      cancleNumberAlt: '',
      cancelText: '行程有变',
      cancelNumber: '',
      data: [
        {
          text: '行程有变'
        }
      ]
    };
  },
  mounted() {
    let params = {
      orderNo: this.$route.query.orderno,
      type: '1'
    };
    Loading.show();
    http.post('/pakj/hitchOrder/getCancleData', params).then(res => {
      Loading.hide();
      console.log(res.data);
      if (res.data.code === '000000') {
        if (res.data.data.allCancleLabel) {
          var textArry = res.data.data.allCancleLabel.split(',');
          this.data = [];
          for (var i in textArry) {
            if (textArry[i]) {
              var textObj = {
                text: textArry[i],
                value: (parseInt(i) + 1).toString()
              };
              this.data.push(textObj);
            }
          }
        }
        if (res.data.data.duty === '0') {
          // 无责
          this.IscancleNumber = false;
        } else {
          if (res.data.data.duty === '2') {
            // 乘客有责
            this.IscancleNumber = true;
            this.cancelNumber = '1';
            this.cancleNumber =
              parseInt(res.data.data.cancelNums) -
              parseInt(res.data.data.weekCancleNum);
            this.cancleNumberAlt = res.data.data.cancelNums;
            if (this.cancleNumber === 0) {
              // 无责取消次数已用完
              this.cancelNumber = '0';
            }
          }
        }
      } else {
        Dialog.alert({
          title: '提示',
          content: res.data.msg,
          confirmText: '确定'
        });
      }
    });
  },
  methods: {
    onRadioChange(obj) {
      this.cancelText = obj.text;
    },
    tripcancelbtn() {
      if (this.$route.query.orderno) {
        if (
          /\ud83d[\udc00-\ude4f\ude80-\udfff]/g.test(this.evaluationDescribe)
        ) {
          Toast({
            content: '不能输入表情',
            duration: 3000,
            hasMask: true
          });
          return false;
        }
        let params = {
          orderNo: this.$route.query.orderno,
          label: this.cancelText,
          reason: this.evaluationDescribe,
          type: '1'
        };
        Loading.show();
        http.post('/pakj/hitchOrder/saveOrderCancel', params).then(res => {
          Loading.hide();
          if (res.data.code === '000000') {
            Dialog.alert({
              title: '提示',
              content: '提交成功',
              confirmText: '确定',
              onConfirm: () => {
                if (Utils.isApp()) {
                  // 判断当前环境是否在app
                  /* eslint-disable */
                  var os = Utils.getOSName();
                  if ((os === 'Linux' || os === 'Android') && handler) {
                    handler.pageOut();
                  } else if (
                    (os === 'iOS' || os === 'MacOSX') &&
                    window.webkit
                  ) {
                    window.webkit.messageHandlers.pageOut.postMessage(
                      JSON.stringify('')
                    );
                  }
                } else {
                  this.$router.replace({
                    name: 'hitchOrderDetail',
                    query: {
                      orderno: this.$route.query.orderno
                    }
                  });
                }
              }
            });
          } else {
            Dialog.alert({
              title: '提示',
              content: res.data.msg,
              confirmText: '确定'
            });
          }
        });
      } else {
        Dialog.alert({
          title: '提示',
          content: '获取不到订单号',
          confirmText: '确定'
        });
      }
    }
  },
  computed: {
    evaluationDescribeLength() {
      return this.evaluationDescribe.length;
    }
  }
};
</script>

<style lang="stylus">
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

h6 {
  display: block;
  font-size: 22px;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: 400;
}

.xc_question {
  width: 24px;
  height: 24px;
  position: relative;
  top: 5px;
}

#tripcancel {
  height: 100vh;
  background-color: color-primary-background;

  .md-field {
    background: transparent;
    padding: 0;

    .md-field-content {
      width: 100%;

      .md-field-item {
        padding: 0px 30px;
      }
    }
  }

  .md-radio-item {
    margin-bottom: 10px;
  }

  .md-icon-circle-right {
    width: 36px;
    height: 36px;
  }

  .md-icon-circle {
    width: 36px;
    height: 36px;
  }
}

.tripcancel_box {
}

.tripcancel_hd_box {
  background-color: #fff;
  padding-bottom: 20px;
}

.tripcancel_hd {
  font-size: 30px;
  color: #333;
  text-align: center;
  padding-top: 20px;
}

.tripcancel_hd_text {
  font-size: 26px;
  color: #666;
  text-align: center;
  padding-top: 8px;
}

.tripcancel_list {
  margin-top: 10px;
}

.cancelBtn {
  margin-top: 30px;
  width: 100%;
}

.cancelBtn h6 {
  text-align: center;
  color: #999;
  font-weight: 400;
  margin-bottom: 10px;
}

.cancelBtn p {
  background-color: #FF6917;
  height: 98px;
  line-height: 98px;
  color: #fff;
  text-align: center;
  margin: 0px 20px;
  border-radius: 10px;
  font-size: 36px;
}

.complaints_input {
  background-color: #fff;
  margin-top: 2px;
  padding: 16px 30px 16px 30px;

  .input_calc {
    font-size: 24px;
    color: rgba(153, 153, 153, 1);
    line-height: 24px;
    width: 100%;
    text-align: right;
  }
}

.complaints_input textarea {
  border: none;
  resize: none;
  font-size: 26px;
  width: 100%;
  height: 160px;
  padding: 0px 0px;
  outline: none;
}
</style>
